<template>
  <BackHeader :title="lang.reword_title" />
  <div class="reward_box">
    <div class="top_tab">
      <div class="top_tab_box">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['top_tab_item', { active: activeTab === index }]"
          @click="setActiveTab(index)"
        >
          <p v-html="tab.text"></p>
        </div>
      </div>
    </div>
    <p class="tips">{{ lang.reword_tips }}</p>
    <div class="list">
      <Placeholder v-if="!list.length" />
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");

// 当前激活的标签页
const activeTab = ref(0);

// 标签页数据
const tabs = [
  {
    text: `${lang.reword_tab_1_line1}<br />${lang.reword_tab_1_line2}`,
  },
  {
    text: `${lang.reword_tab_2_line1}<br />${lang.reword_tab_2_line2}`,
  },
];

// 设置激活的标签页
function setActiveTab(index: number) {
  activeTab.value = index;
}

const list = ref([]);
</script>

<style scoped lang="scss">
.reward_box {
  min-height: 100vh;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0 0.2rem;
  box-sizing: border-box;
  background: var(--theme-color3);
  color: var(--theme-neutral1);
  padding-top: 2.6rem;
}

.top_tab {
  width: 100%;
  height: 1.7rem;
  position: fixed;
  top: 1.2rem;
  left: 0;
  z-index: 99;
  background: var(--theme-color9);
  padding-top: 0.3rem;

  .top_tab_box {
    display: flex;
    width: 100%;
    height: 1.4rem;
    padding: 0 0.2rem;
    background: var(--theme-color4);
  }

  .top_tab_item {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.32rem;
    position: relative;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
      background: linear-gradient(
        0deg,
        var(--theme-color1),
        var(--theme-color2)
      );
      opacity: 1;

      &:after {
        content: "";
        width: 100%;
        height: 0.04rem;
        background: var(--theme-dec4);
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
}

.tips {
  margin-top: 0.7rem;
  font-size: 0.3rem;
  text-align: center;
  color: var(--theme-neutral2);
}

.list {
  margin-top: 0.3rem;
}
</style>
